@import '../../var.less';

.box {
  max-height: 100%;
  flex: 1;
  padding-right: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20px 0px 15px 15px;
}

.linkButton{
  .f-button();
}

.linkButton i {
  margin-right: 4px;
  font-size: 13px;
}

.title {
  font-size: 14px;
}

.scrollBox{
  
  flex: 1;
  overflow: auto;
}

.connectionList {
  padding-bottom: 30px;
}

.connectionItem {
  position: relative;
  display: flex;
  padding: 6px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 14px;
    color: var(--color-text-75);

    .logo {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 4px;
      margin-right: 15px;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .visitedTime {
      color: var(--color-text-45);
    }

    .name,.user,.url{
      .f-lines(1);
      line-height: 100%;
      margin-right: 20px;
    }
    .name{
      flex: 2;
    }
    .EnvType{
      flex: 1;
    }
    .user{
      flex: 1;
    }
    .url{
      flex: 5;
    }
    
  }

  .right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    .moreActions {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      width: 30px;
      border-radius: 10px;
      color: var(--color-text-75);
      &:hover {
        background-color: var(--color-bg-hover);
        filter: brightness(1.1);
      }
    }
  }

  &:hover {
    background-color: var(--color-bg-hover);
    .name,.user,.url,.EnvType {
      color: var(--custom-primary-color);
    }
    .logo {
      filter: brightness(1.1);
    }
  }
}
